import React, { Component } from 'react'
import {Redirect} from 'react-router-dom'
import { Form, Icon, Input, Button } from 'antd';
import {connect} from 'react-redux'
import { login } from '../../redux/actions'
import './login.less'

class Login extends Component{
  loginSubmit = (e) => {
    // 阻止事件默认行为
    e.preventDefault()
    // 进行表单控件的校验
    this.props.form.validateFields(async (err, values) => {
      if(!err){
        this.props.login(values)
      } else {
        console.log(err)
      }
    })
  }
  render() {
    const user = this.props.user
    if(user && user.id) {
      return <Redirect to='/home'/>
    }
    const { getFieldDecorator } = this.props.form;
    return(
      <div className="login_from">
        <h1 className="logo_title">React-Antd后台管理系统</h1>
        <Form className="login-form">
          <Form.Item>
            {getFieldDecorator('loginName', {
              rules: [{ required: true, message: '请输入用户名!' }],
            })(
              <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="请输入用户名" />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('loginPwd', {
              rules: [{ required: true, message: '请输入密码!'}]
            })(
              <Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />
            )}
          </Form.Item>
          <Form.Item>
            <Button type="primary" block onClick={this.loginSubmit} htmlType="submit" className="login-form-button">登录</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
export default connect(
  state => ({
    user: state.user
  }),
  {login}
)(Form.create()(Login))